<template>
	<view>
		<scroll-view class="scrollview-category" scroll-x="true">
		    <view class="scrollview-category-item" v-for="li in categorys" :key="li.categoryId">
				<view ><image class="scrollview-category-img" :src="li.image"></image></view>
				<view ><text class="scrollview-category-text" v-text="li.categoryName"></text></view>
			</view>
		</scroll-view>
	</view>
	
</template>

<script>
export default {
		data() {
			return {
				categorys: [],
			}
		},
		// option 前页面传递的参数
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
				let categoryId = option.categoryId;
				uni.request({
					url: 'http://tt.tiantue.com/tiantue/public/category/getCategoryByParentId',
					data:{
						categoryId:categoryId
					},
					success: (res) => {
						this.categorys = res.data.data;
					}
				});
		    },
		onReady() {
			
		},
		methods: {

		}
	}	
</script>

<style>
	.scrollview-category{
		margin-top: 8rpx;
		/* display: flex; */
		height: 150rpx;
		white-space: nowrap;
		width: 750rpx;
		background-color: #EEEEEE;
	}
	.scrollview-category-item{
		margin: 8rpx;
		display: inline-block;
		width: 134rpx;
		height: 134rpx;
		line-height: 134rpx;
		text-align: center;
		font-size: 30rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}
	.scrollview-category-img{
		margin-top: 8rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.scrollview-category-text{
		text-align: center;
		overflow: hidden;
	}
</style>
